<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font_3776968_rdplj0van1q/iconfont.css">
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .left{
            background-color: 	rgb(51, 57, 71);
            width: 200px;
            text-align: center;
            float: left;
            height: 922px;
        }
        .left div{
            color: rgb(187,192,220);
            height: 50px;
            line-height: 50px;
        }
        .left ul{
            list-style: none;
            color:  rgb(187,192,220);
            
        }
        .left ul li{
            height: 50px;
            line-height: 50px;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            border-radius: 10px;
            padding: 0 25px;
        }
        .right{
            float: left;
            width: 80%;
         background-color: rgb(245,246,252);
        }
        .right .top{
            display: flex;
            height: 50px;
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
         align-items: center;
         background-color: white;
         box-shadow: 1px 1px 1px 1px black;
        }
        .right p{
            margin-right: 20px;
        }
        .right input{
         
            height: 30px;
        }
        .right .bottom .foot{
            display: flex;
            flex-wrap: wrap;
            height: 100%;
            justify-content: space-around;
        }
        .right .bottom .foot div{
            box-shadow: 1px 1px 1px 1px black;
            background-color: white;
        }
        .right .bottom .foot div:nth-of-type(1){
            width: 48%;
            height: 400px;
          border: 2px solid #ccc;
            margin-right: 20px;
            margin-top: 20px;
            margin-bottom: 10px;
          
        }
        .right .bottom .foot div:nth-of-type(2){
            width: 48%;
            height: 400px;
            border: 2px solid #ccc;
            margin-top: 20px;
            margin-bottom: 10px;
        }
        .right .bottom .foot div:nth-of-type(3){
            width: 48%;
            height: 400px;
            margin-right: 20px;
            border: 2px solid #ccc;
        }
        .right .bottom .foot div:nth-of-type(4){
            width: 48%;
            height: 400px;
            border: 2px solid #ccc;
        }
        .foot .data table{
            
            width: 100%;
            
            text-align: center;
            line-height: 40px;
            border-collapse: collapse;
        }
        /* table tr td{
        } */
       
        table tr td:nth-child(1){
          text-align:left;
        }
        .iconfont{
            color: white;
        }
        .icon-zhongfu{
          display: block;
         margin: 10px 0;
         height: 60px;
         line-height: 60px;
        }
        .icon-gouwuchekong{
            display: block;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">
            <div>AdminLTE3</div>
            <div>Alexander Pierce</div>
            <ul>
                <li style="background-color: rgb(0,136,255);"><span class="iconfont icon-yibiaopan_o" style="font-size: 25px;"></span>Dashboard</li>
                <li><span class="iconfont icon-xingzhuang-tuoyuanxing
                    " style="font-size: 20px;"></span>Dashboard v1</li>
                <li><span class="iconfont icon-xingzhuang-tuoyuanxing
                    " style="font-size: 20px;"></span>Dashboard v2</li>
                <li style="background-color: rgb(235,236,235);" ><span class="iconfont icon-xingzhuang-tuoyuanxing
                    " style="font-size: 20px; color: black;"></span>Dashboard v3</li>
                <li><span class="iconfont icon-jiugongge " style="font-size: 20px;"></span>Widgets<</li>
                <li><span class="iconfont icon-circular" style="font-size: 20px;"></span>Charts<</li>
                <li><span class="iconfont icon-tree2 " style="font-size: 20px;"></span>Ui Elements<</li>
                <li><span class="iconfont icon-form" style="font-size: 20px;"></span>Forms<</li>
                <li><span class="iconfont icon-tables" style="font-size: 20px;"></span>Tables<</li>
                <li>EXAMPLIES</li>
                <li><span class="iconfont icon-icon" style="font-size: 20px;"></span>Calendar<</li>
                <li><span class="iconfont icon-youjian" style="font-size: 20px;"></span>Mailbox<</li>
                <li><span class="iconfont icon-pages" style="font-size: 20px;"></span>Pages<</li>
                <li><span class="iconfont icon-jiahao" style="font-size: 20px;"></span>Extras<</li>
            </ul>
        </div>
        <div class="right">
            <div class="top">
                <p>Home</p>
                <p>Contact</p>
                <input type="text" placeholder="Search">
            </div>
            <div class="bottom">
                <p  style="margin-top: 10px;">
                    <span style="font-size: 25px; font-weight: bold">Dashboard v3</span>
                    <span style="float: right; margin-top: 10px">/&nbsp;Dashboard v3</span>
                    <span style="float: right;margin-top: 10px;color: blue;">Home &nbsp; </span>
                   
                </p>
              <div class="foot">
                <div class="xiantu"></div>
                <div class="zhutu"></div>
                <div class="data" >
                    <p style="font-size:20px;font-weight: bold;">Products</p>
                    <table>
                               <thead>
                                 <tr style="font-weight: bold;border-bottom: 1px solid #ccc;"><td>Product</td>
                                     <td>Price</td>
                                     <td>Sales</td>
                                     <td>More</td>
                                 </tr>
                               </thead>
                               <tbody>
                               </tbody>
                             </table>
                </div>
                <div class="small">
                    <p style="font-size:20px;font-weight: bold;">Online Store Overview</p>
                    <span class="iconfont icon-zhongfu" style="font-size: 30px ;color: greenyellow; border-bottom: 2px solid #ccc;display: flex; justify-content: space-between;" ><p style="font-size: 16px; color: black;">^12%
                        </p></span><br>
                    <span class="iconfont icon-gouwuchekong" style="font-size: 30px; color: orange;display: flex; justify-content: space-between;"><p style="font-size: 16px; color: black;">^0.8%
                    </p></span>
                </div>
              </div>
            </div>
        </div>
    </div>
</body>
</html>
<!-- <script src="./echarts.js"></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.0/mock.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script src="./表格mock.js"></script>
 <script>
    //折线图
   var myChart = echarts.init(document.querySelector('.xiantu'));
   option = {
     title: {
         text: '820\nVisitors Over Time'
     },
    
     legend: {
        bottom:'5px',
        right:'5px',
        //  x:'right', // 默认在上面，
         orient: 'horizontal', //  默认横排显示
         data: ['This week', 'Last week']
     },
     xAxis: [{
         type: 'category',
         data: ['18th', '20th', '22th', '24th', '26th', '28th', '30th'  ]
     }],
     
     yAxis: [{
       
     }],
     
     series: [{
         name: 'This week',
         type: 'line',
         smooth:true,
         data: [100, 120, 170, 160,180,176,140],
         
        
     }, {
         name: 'Last week',
         type: 'line',
         smooth:true,
         data: [60,80,75,62,80,78,100]
     }],
     itemstyle:{
          normal:{
            color:'orange'
          }
         }
 };
   myChart.setOption(option);
   var myChart1 = echarts.init(document.querySelector('.zhutu'));
   //柱状图
   option = {
     title: {
          text: 'Sales',
        subtext:'$18,230.00\nAwesome Chart'
     },
    
     legend: {
        bottom:'5px',
        right:'5px',
        //  x:'right', // 默认在上面，
         orient: 'horizontal', //  默认横排显示
         data: ['This week', 'Last week']
     },
     xAxis: [{
         type: 'category',
         data: ['JUN ', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']
     }],
     
     yAxis: [{
       
     }],
     
     series: [{
         name: 'This week',
         type: 'bar',
         smooth:true,
         data: [1, 2, 3, 2.5, 2.8, 2.7, 3],
         
        
     }, {
         name: 'Last week',
         type: 'bar',
         smooth:true,
         data: [0.8,1.8, 2.7, 2, 1.7,1.6, 2],
     }],
     itemstyle:{
          normal:{
            color:'orange'
          }
         }
 };

myChart.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      dataIndex: 0
    })
   myChart1.setOption(option);



   function render( data ){
            var str = data.map((item,index)=>{
                return `<tr  style="background-color: #F3F3F3;">
                            <td>${item.name}</td>
                            <td>$${item.pirce}  USD</td>
                            <td>${item.sales}, ${item.sales}   Sold</td>
                            <td>☼</td>
                        </tr>`
            }).join('')
            document.querySelector('tbody').innerHTML = str;
        }
        render( data.list )
//  var data=document.querySelector('.data')
//    var str=''
//    str=`
  
//    `
//    data.innerHTML=str
 </script>